<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="left">
      <h1 v-show="!isShow" key="1">你好啊!</h1>
    </transition-group>
    <!-- <transition-group name="top">
      <h1 v-show="!isShow" key="1">你好啊!</h1>
    </transition-group> -->

    <div v-for="item in 3" :key="item">
      <div class="music" :key="item+10" >
        <VueDragResize :key="item+20" :isActive="true" :preventActiveBehavior='true' :parent-limitation="true" :isDraggable="true"
          :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize" :style="{ left:'20px' }">
          <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
          <div style="overflow: hidden" :style="{ width: + vw + 'px', height: +vh + 'px', overflow: 'hidden' }">
            <img :key="item+30"
              src="https://www.apple.com.cn/v/iphone-11/c/images/overview/display/inline_compare_display__fbiiqsjjs0ii_large.jpg"
              style="width: 100%;height: 100%" />
          </div>
        </VueDragResize>
        <!-- <div>
          <h3>Hello World!</h3>
          <p>{{ vw }} х {{ vh }}</p>
          <p>{{ top }} х {{ left }}</p>
        </div> -->
      </div>
    </div>


  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";
export default {
  name: 'Test',
  data() {
    return {
      isShow: true,
      vw: 0,
      vh: 0,
      top: 0,
      left: 0,
    }
  },
  components: { VueDragResize },
  created() {
    this.vw = 200 + "px";
    this.vh = 200 + "px";
  },
  methods: {
    resize(newRect) {
      this.vw = newRect.width;
      this.vh = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}

.left-enter,
.left-leave-to {
  transform: translate3d(-100%, 0, 0)
}

.left-leave,
.left-enter-to {
  transform: translate3d(0, 0, 0)
}

.left-enter-active,
.left-leave-active {
  transition: all .2s
}

.top-enter,
.top-leave-to {
  transform: translate3d(0, -100%, 0)
}

.top-leave,
.top-enter-to {
  transform: translate3d(0, 0, 0)
}

.top-enter-active,
.top-leave-active {
  transition: all .2s
}

.scale-enter,
.scale-leave-to {
  transform: scale(0)
}

.scale-leave,
.scale-enter-to {
  transform: scale(1)
}

.scale-enter-active,
.scale-leave-active {
  transition: all .2s
}

.right-enter,
.right-leave-to {
  transform: translate3d(100%, 0, 0)
}

.right-leave,
.right-enter-to {
  transform: translate3d(0, 0, 0)
}

.right-enter-active,
.right-leave-active {
  transition: all .2s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.fade-leave,
.fade-enter-to {
  opacity: 1
}

.fade-enter-active,
.fade-leave-active {
  transition: all .2s
}

::v-deep .content-container {
  overflow: hidden;
}

.music {
  width: 700px;
  height: 600px;
  border: 1px solid #f00;
  position: relative;
}
</style>

